﻿
@{
    ViewBag.Title = "Index";
}
<h3>Quản lý danh mục</h3>
<div ng-controller="categories">
    <a href="#" class="btn btn-info btn-lg" ng-click="showAdd()">
        <span class="glyphicon glyphicon-plus"></span> Thêm mới danh mục
    </a>
    <table class="table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Parent</th>
                <th>Description</th>
                <th>Type</th>
                <th>Status</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="cat in listcat">
                <td>{{cat.Id}}</td>
                <td>{{cat.Name}}</td>
                <td>{{cat.ParentId}}</td>
                <td>{{cat.Description}}</td>
                <td>{{cat.Type}}</td>
                <td>
                    <span class="label {{cat.IsActive ? 'label-success' : 'label-warning'}}">{{cat.IsActive ? 'Active' : 'Not Active'}}</span>
                </td>
                <td>
                    <a href="#" ng-click="showEdit()" data-toggle="tooltip" title="Edit: {{cat.Name}}">
                        <span class="glyphicon glyphicon-pencil"></span>
                    </a>
                    <a href="#" ng-click="showRemove()" data-toggle="tooltip" title="Delete: {{cat.Name}}">
                        <span class="glyphicon glyphicon-remove"></span>
                    </a>
                    <a href="#" ng-click="showMetadata()" data-toggle="tooltip" title="Meta data: {{cat.Name}}">
                        <span class="glyphicon glyphicon-info-sign"></span>
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
    <div id="addModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div id="refer-form" class="panel panel-primary">
                <div class="panel-heading">
                    <span data-dismiss="modal" class="close-button"><span><img src="/Images/icon-close.gif" class="close-icon" /></span></span>
                    <h3 class="modal-title">Thêm mới danh mục</h3>
                </div>
                <div class="panel-body">
                    <div class="alert alert-danger hidden"></div>
                    <form id="addForm" class="refer-friend">
                        <div class="row">
                            <div class="form-group">
                                <label class="col-md-3 control-label" for="name">Name <span class="mandatory">*</span></label>
                                <div class="col-md-9">
                                    <div class="input-row">
                                        <input name="Name" type="text" placeholder="Category Name" class="form-control" required/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group">
                                <label class="col-md-3 control-label" for="email">Description <span class="mandatory">*</span></label>
                                <div class="col-md-9">
                                    <div class="input-row">
                                        <input name="Description" type="text" placeholder="Category Description" class="form-control" required />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <!-- Your Name-->
                            <div class="form-group">
                                <label class="col-md-3 control-label" for="email">Type</label>
                                <div class="col-md-9">
                                    <div class="input-row">
                                        <select name="Type" class="form-control">
                                            <option ng-repeat="type in cattypes" value="{{type.Value}}">{{type.Text}}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr />

                        <div id="buttons_place">
                            <span class="pull-left"><span class="active">*</span> marks mandatory field</span>
                            <span class="pull-right">
                                <input type="button" class="btn" value="Cancel" ng-click="cancelAdd()" />
                                <input type="button" class="btn btn-success" value="Submit" ng-click="submitAdd()" />
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="editModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div id="refer-form" class="panel panel-primary">
                <div class="panel-heading">
                    <span data-dismiss="modal" class="close-button"><span><img src="/Images/icon-close.gif" class="close-icon" /></span></span>
                    <h3 class="modal-title">Sửa danh mục</h3>
                </div>
                <div class="panel-body">
                    <div class="alert alert-danger hidden"></div>
                    <form id="editForm" class="refer-friend">
                        <div class="row">
                            <div class="form-group">
                                <label class="col-md-3 control-label" for="name">Name <span class="mandatory">*</span></label>
                                <div class="col-md-9">
                                    <div class="input-row">
                                        <input name="Name" type="text" placeholder="Category Name" class="form-control" value="{{category.Name}}" required />
                                        <input id="Id" name="Id" type="hidden" value="{{category.Id}}" required />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group">
                                <label class="col-md-3 control-label" for="email">Description <span class="mandatory">*</span></label>
                                <div class="col-md-9">
                                    <div class="input-row">
                                        <input name="Description" type="text" placeholder="Category Description" class="form-control" value="{{category.Description}}" required />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <!-- Your Name-->
                            <div class="form-group">
                                <label class="col-md-3 control-label" for="email">Type</label>
                                <div class="col-md-9">
                                    <div class="input-row">
                                        <select name="Type" class="form-control">
                                            <option ng-repeat="type in cattypes" value="{{type.Value}}">{{type.Text}}</option>
                                        </select>
                                        <select ng-options="o.Text for o in cattypes track by o.Value" ng-model="xx" required></select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr />

                        <div id="buttons_place">
                            <span class="pull-left"><span class="active">*</span> marks mandatory field</span>
                            <span class="pull-right">
                                <input type="button" class="btn" value="Cancel" ng-click="cancelEdit()" />
                                <input type="button" class="btn btn-success" value="Submit" ng-click="submitEdit()" />
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="messages" class="modal" role="dialog">
        <div class="modal-dialog">
            <div id="message-panel" class="panel panel-primary">
                <div class="panel-heading">
                    <span data-dismiss="modal" class="close-button"><span><img src="/Images/icon-close.gif" class="close-icon" /></span></span>
                    <h3 class="modal-title">Refer to Friend</h3>
                </div>
                <div class="panel-body">
                    <div class="alert alert-success">
                        We have succeccful sent an email to your friend.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var categoryTypes = [{ Text: 'Tin tức', Value: 'tin-tuc' }, { Text: 'Du lịch', Value: 'du-lich' }, { Text: 'Địa điểm', Value: 'dia-diem' }];
    var getlistUrl = "/api/category/getlist/0/1000";
    angular.module('myApp', [])
    .controller('categories', function ($scope, $http) {        
        $scope.cattypes = categoryTypes;
        $http.get(getlistUrl).success(function (response) {
            $scope.listcat = response;
        });
        //for add
        $scope.showAdd = function () {
            event.preventDefault();
            $('#addModal').removeData("modal");
            $('#addModal').modal();
            $("#addModal input[type=text], #addModal textarea").val("");
        },
        $scope.cancelAdd = function () {
            $("#addModal").removeClass("fade").modal("hide");
        },
        $scope.submitAdd = function () {
            var url = "/api/category/add";
            $http.post(url, $('#addForm').serialize(), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
            .success(function (response) {
                $("#addModal").removeClass("fade").modal("hide");
                $http.get(getlistUrl).success(function (response) {
                    $scope.listcat = response;
                });
            })
            .error(function (err) { $("#addModal").removeClass("fade").modal("hide"); alert(err); });
        },
        //for edit
        $scope.cancelEdit = function () {
            $("#editModal").removeClass("fade").modal("hide");
        },
        $scope.submitEdit = function () {
            var id = $('#editForm #Id').val();
            var url = "/api/category/update/" + id;
            $http.put(url, $('#editForm').serialize(), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
            .success(function (response) {
                $("#editModal").removeClass("fade").modal("hide");
                $http.get(getlistUrl).success(function (response) {
                    $scope.listcat = response;
                });
                $("#editModal").reset();
            })
            .error(function (err) { $("#editModal").removeClass("fade").modal("hide"); alert(err); });
        },
        $scope.showEdit = function () {
            event.preventDefault();
            var id = this.cat.Id;
            var url = "/api/category/get/" + id;
            $http.get(url).success(function (response) {
                $scope.category = response;
            });
            $('#editModal').modal();
        },


        $scope.showRemove = function () {
            event.preventDefault();
            var id = this.cat.Id;
            var url = "/api/category/delete/" + id;
            if (confirm("Bạn có chắc muốn xóa phân mục: " + this.cat.Name)) {
                $http.delete(url, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
                .success(function (response) {
                    $http.get(getlistUrl).success(function (response) {
                        $scope.listcat = response;
                    });
                })
                .error(function (err) { alert(err); });
            }
        }
    });
    
</script>